﻿@using HotelManageSystem.Models
@{
    ViewBag.Title = "Select Product";
    Layout = "~/Views/Shared/_Template3.cshtml";
}
@section Head {
    <script src="../../JS/popuplayer.js" type="text/javascript"></script>
    <link href="../../Content/popuplayer.css" rel="stylesheet" type="text/css" />
   <style type ="text/css">
    
</style>
    <style type="text/css">
        .employee-details ul
        {
            list-style: none;
            font-style: italic;
            margin-left: 80px;
            margin-bottom: 20px;
        }
        .employee-details img
        {
            border: 1px solid #05679D;
            float: left;
        }
        .employee-details label
        {
            display: inline-block;
            width: 90px;
            font-style: normal;
            font-weight: bold;
        }
          
    </style>
}
<br/>
<div style="font-size: 26px;color: red" align="center">
    <li>请选择商品</li>
</div>
@{
 Html.Telerik()
        .Grid<ProductCategoryInfoModel>()
        .Name("ProductCatarory")
        .Columns(columns =>
                        {
                            columns.Bound(e => e.ID).Width(120).Title("货品类别编号").HtmlAttributes(new { style = "text-align:center" }); ;
                            columns.Bound(e => e.Name).Width(150).Title("货品类别名称").HtmlAttributes(new { style = "text-align:center" }); ;
                            columns.Bound(e => e.Remark).Width(400).Title("货品类别简介");
                        })
        .ClientEvents(events => events.OnRowDataBound("products_onRowDataBound"))
        .DetailView(details => details.ClientTemplate(
                Html.Telerik()
                    .TabStrip()
                    .Name("TabStrip_<#= ID #>")
                    .SelectedIndex(0)
                    .Items(items =>
                                {
                                    items.Add().Text("商品列表").Content(
                                          Html.Telerik().Grid<ProductInfoModel>()
                                                        .Name("Orders_<#= ID #>")
                                                        .Columns(columns =>
                                                                    {
                                                                        columns.Bound(o => o.ID).Width(80).Title("产品编号").HtmlAttributes(new { style = "text-align:center" }); 
                                                                        columns.Bound(o => o.Name).Width(80).Title("产品名称").HtmlAttributes(new { style = "text-align:center" }); 
                                                                        columns.Bound(o => o.PriceOut).Width(60).Title("价格").HtmlAttributes(new { style = "text-align:center" });
                                                                        columns.Bound(o => o.Count).Width(80).Title("库存数量").HtmlAttributes(new { style = "text-align:center" }); 
                                                                        columns.Bound(o => o.Remark).Width(130).Title("产品简介");
                                                                        //columns.Template(r => @Html.Raw("<a id='" + r.ID + "' href='#lightbox1' rel='lightbox1' class='lbOn'>购买…</a>"))
                                                                        //       .ClientTemplate("<a href='#lightbox1' rel='lightbox1' class='lbOn'>购买…</a>").Title("操作");

                                                                        columns.Template(r => @Html.Raw("<input id='" + r.ID + "' onclick='openButton() type='button' value=' 购买 ' />"))
                                                                               .ClientTemplate("<input id='<#=ID#>' onclick='openButton()' type='button' value=' 购买 '/>").Title("操作").Width(50);

                                                                    })
                                                        .DataBinding(dataBinding => dataBinding.Ajax()
                                                                                            .Select("ProdcutForCatagoryDetailsAjax", "ClientConsumption", new { Id = "<#=ID #>" }))
                                                                                            .Pageable(paging => paging.PageSize(5))
                                                                                            .Sortable()
                                                                                            .Filterable()
                                                                                            .ToHtmlString());

                                    items.Add().Text("预览").Content(
                                        "<div class='employee-details'>" +
                                        "<ul>" +
                                        "<li><label>名称:</label><#=Name#></li>" +
                                        "<li><label>简介:</label><#=Remark#></li>" +
                                        "</ul>" +
                                        "</div>"
                                        );
                                })
                                .ToHtmlString()
                )
            )
            .DataBinding(dataBinding => dataBinding.Ajax() .Select("ProductCatagoryDetailsAjax", "ClientConsumption"))
            .Pageable(paging => paging.PageSize(6))                                    
            .Scrollable(scrolling => scrolling.Height(450))
            .Sortable()
            .Render();
  }
<br/>
<div style="text-align:right;">
     <input name="" style="font-size: 20px" type="button" value="  消费详情  " id="productDetails" onclick="showConsumeDetails()" />&nbsp;&nbsp;&nbsp;
</div>
<br/>

<dl id="idBox" class="lightbox">
    <dt id="idBoxHead">
        <h2>请输入购买数量</h2>
    </dt>
    <hr/>
    <dd>
        <br />
        <div align="center">
            数量：@*<input type="text" id="productCount"/>*@
            @(Html.Telerik().IntegerTextBox()
                            .Name("productCount")                                   
                            .MinValue(0)
                            .MaxValue(20)                                   
                            .Value(0)                
                            )
        </div>
        <br />
        <div align="right">
            <input name="" type="button" value=" 确定 " id="commit" onclick="commitButton()" />&nbsp;&nbsp;&nbsp;
            <input name="" type="button" value=" 关闭 " id="idBoxCancel" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </div>
        <br />
    </dd>
</dl>

<script type="text/javascript">

    function expandFirstRow(grid, row) {
        if (grid.$rows().index(row) == 0)
        { grid.expandRow(row); }
    }
    function products_onRowDataBound(e) {
        var grid = $(this).data('tGrid');
        expandFirstRow(grid, e.row);
    }
</script>



<script type="text/javascript">
    var box = new LightBox("idBox");
    var arrayId = new Array(); //创建一个数组,存储产品的ID
    var arrayCount = new Array();//创建数组，存储产品的数量
    var product = {};
    $("idBoxCancel").onclick = function () {
         box.Close();
    };
    //显示弹出层
    function openButton() {
        box.Show();
        product.productId = event.srcElement.id;//获取当前的ID
    }
    function commitButton() {
        product.productCount = document.getElementById("productCount").value;
        if (!isNaN(product.productCount) && product.productCount!="") {
            arrayId.push(product.productId);
            arrayCount.push(product.productCount); //获取数量
            document.getElementById("productCount").value = "";
            //$.post("/ClientConsumption/EditProductCount", product, function () { });
            
            //window.location.reload();
            box.Close();
        } else {
            alert("这里不能为空，并且只能输入数字，请重新输入！！");
        }
    }
    function showConsumeDetails() {
        if (arrayId.length != 0) {
            window.location.href = "/Client/ClientConsumeShow/?productId=" + arrayId + "&productCounts=" + arrayCount;
        }
        else {
            alert("恭喜您，入住成功！");
            window.location.href = "/Room/Index";
        }
    }
</script>
